<template>
    <div class="messages-container">
        <div class="page-header">
            <h2>消息管理</h2>
            <div class="actions">
                <button class="btn btn-primary" @click="showCreateForm">创建新任务</button>
            </div>
        </div>

        <div class="filter-section">
            <div class="filter-item">
                <label for="statusFilter">状态:</label>
                <select id="statusFilter" v-model="statusFilter" @change="fetchTasks">
                    <option value="">全部状态</option>
                    <option value="pending">待执行</option>
                    <option value="running">执行中</option>
                    <option value="completed">已完成</option>
                    <option value="failed">失败</option>
                </select>
            </div>
            <div class="refresh-btn">
                <button @click="fetchTasks" class="btn btn-sm btn-outline" title="刷新">
                    <span class="icon">🔄</span>
                </button>
            </div>
        </div>

        <div class="card task-list">
            <table class="task-table">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>类型</th>
                        <th>目标</th>
                        <th>计划时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="task in tasks" :key="task._id">
                        <td>{{ task.name }}</td>
                        <td>{{ formatType(task.type) }}</td>
                        <td>{{ formatTarget(task.targetType) }} ({{ task.targetIds.length }})</td>
                        <td>{{ formatDate(task.scheduledTime) }}</td>
                        <td>
                            <span :class="['status-badge', task.status]">{{ formatStatus(task.status) }}</span>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-sm btn-icon" title="查看详情" @click="viewTask(task)">
                                    <span class="icon">👁️</span>
                                </button>
                                <button class="btn btn-sm btn-icon" title="编辑" @click="editTask(task)"
                                    v-if="task.status === 'pending'">
                                    <span class="icon">✏️</span>
                                </button>
                                <button class="btn btn-sm btn-icon btn-danger" title="删除" @click="confirmDelete(task)"
                                    v-if="task.status === 'pending'">
                                    <span class="icon">🗑️</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="tasks.length === 0">
                        <td colspan="6" class="text-center empty-message">
                            <div class="empty-state">
                                <div class="empty-icon">📭</div>
                                <div>暂无消息任务</div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="pagination" v-if="total > 0">
                <button :disabled="currentPage === 1" @click="prevPage" class="btn">上一页</button>
                <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
                <button :disabled="currentPage === totalPages" @click="nextPage" class="btn">下一页</button>
            </div>
        </div>

        <!-- 创建/编辑任务表单 -->
        <div class="modal" v-if="showModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>{{ isEdit ? '编辑任务' : '创建新任务' }}</h3>
                    <span class="close" @click="closeModal">&times;</span>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="saveTask">
                        <div class="form-group">
                            <label>任务名称</label>
                            <input type="text" v-model="form.name" required placeholder="例如：每日公告" />
                        </div>

                        <div class="form-group">
                            <label>消息类型</label>
                            <div class="radio-group">
                                <label class="radio-label">
                                    <input type="radio" v-model="form.type" value="text" :disabled="isEdit" />
                                    <span>文本消息</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" v-model="form.type" value="forward" :disabled="isEdit" />
                                    <span>转发消息</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group" v-if="form.type === 'text'">
                            <label>消息内容</label>
                            <textarea v-model="form.content" rows="4" required placeholder="输入要发送的消息内容..."></textarea>
                            <div class="help-text">支持Markdown格式</div>
                        </div>

                        <div class="form-group" v-if="form.type === 'forward'">
                            <label>原始消息ID <span class="required">*</span></label>
                            <input type="text" v-model="form.originalMessageId" required placeholder="例如: -1001234567890:123456" />
                            <div class="help-text">
                                <p>格式: <code>聊天ID:消息ID</code></p>
                                <p>获取消息ID的方法:</p>
                                <ol>
                                    <li>在Telegram中转发消息给机器人，机器人会自动返回原始消息ID</li>
                                    <li>或者回复想要获取ID的消息，并发送 <code>/get_msg_id</code> 命令</li>
                                    <li>或者直接发送 <code>/my_msg_id</code> 命令获取当前消息的ID</li>
                                </ol>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>目标类型</label>
                            <div class="radio-group">
                                <label class="radio-label">
                                    <input type="radio" v-model="form.targetType" value="group" :disabled="isEdit" />
                                    <span>群组</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" v-model="form.targetType" value="user" :disabled="isEdit" />
                                    <span>用户</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" v-model="form.targetType" value="all" :disabled="isEdit" />
                                    <span>所有群组和用户</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group" v-if="form.targetType === 'user'">
                            <div class="select-all-option">
                                <label class="checkbox-label">
                                    <input type="checkbox" v-model="selectAllUsers" @change="handleSelectAllUsers" />
                                    <span>选择所有用户</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group" v-if="form.targetType !== 'all' && !selectAllUsers">
                            <label>选择目标 <span class="selected-count">(已选 {{ form.targetIds.length }} 个)</span></label>
                            <div class="targets-selection">
                                <div class="search-box">
                                    <input type="text" v-model="targetSearch" placeholder="搜索目标..." />
                                </div>
                                <select v-model="form.targetIds" multiple required class="targets-multi-select">
                                    <option v-for="target in filteredTargetsBySearch" :key="target.id"
                                        :value="target.id">
                                        {{ target.name }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group send-mode-group">
                            <label>发送方式</label>
                            <div class="radio-group">
                                <label class="radio-label">
                                    <input type="radio" v-model="sendMode" value="scheduled" />
                                    <span>定时发送</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" v-model="sendMode" value="immediately" />
                                    <span>立即发送</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group" v-if="sendMode === 'scheduled'">
                            <label>计划发送时间</label>
                            <input type="datetime-local" v-model="form.scheduledTime" required />
                        </div>

                        <div class="form-group" v-if="sendMode === 'scheduled'">
                            <label>重复发送</label>
                            <select v-model="form.repeatType">
                                <option value="none">不重复</option>
                                <option value="daily">每天</option>
                                <option value="weekly">每周</option>
                                <option value="monthly">每月</option>
                            </select>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn" @click="closeModal">取消</button>
                            <button type="submit" class="btn btn-primary">
                                {{ sendMode === 'immediately' ? '立即发送' : '保存' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 任务详情弹窗 -->
        <div class="modal" v-if="showDetailModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>任务详情</h3>
                    <span class="close" @click="closeDetailModal">&times;</span>
                </div>
                <div class="modal-body" v-if="currentTask">
                    <div class="task-detail">
                        <div class="detail-card">
                            <div class="detail-item">
                                <span class="label">任务名称:</span>
                                <span>{{ currentTask.name }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">消息类型:</span>
                                <span>{{ formatType(currentTask.type) }}</span>
                            </div>
                            <div class="detail-item" v-if="currentTask.type === 'text'">
                                <span class="label">消息内容:</span>
                                <div class="content-preview">{{ currentTask.content }}</div>
                            </div>
                            <div class="detail-item" v-else-if="currentTask.type === 'forward'">
                                <span class="label">原始消息ID:</span>
                                <div class="content-preview">{{ currentTask.originalMessageId }}</div>
                                <div class="help-text small">
                                    <p>这是将被转发的原始消息的ID</p>
                                </div>
                            </div>
                            <div class="detail-item">
                                <span class="label">目标类型:</span>
                                <span>{{ formatTarget(currentTask.targetType) }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">目标数量:</span>
                                <span>{{ currentTask.targetIds.length }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">计划发送时间:</span>
                                <span>{{ formatDate(currentTask.scheduledTime) }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">重复类型:</span>
                                <span>{{ formatRepeatType(currentTask.repeatType) }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">状态:</span>
                                <span
                                    :class="['status-badge', currentTask.status]">{{ formatStatus(currentTask.status) }}</span>
                            </div>
                        </div>

                        <div class="task-results card" v-if="currentTask.lastRunTime">
                            <h4>执行结果</h4>
                            <div class="result-stats">
                                <div class="stat-item success">
                                    <div class="stat-value">{{ currentTask.result?.success || 0 }}</div>
                                    <div class="stat-label">成功</div>
                                </div>
                                <div class="stat-item failed">
                                    <div class="stat-value">{{ currentTask.result?.failed || 0 }}</div>
                                    <div class="stat-label">失败</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">{{ formatDate(currentTask.lastRunTime) }}</div>
                                    <div class="stat-label">执行时间</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 删除确认弹窗 -->
        <div class="modal" v-if="showDeleteModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>确认删除</h3>
                    <span class="close" @click="showDeleteModal = false">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="delete-confirmation">
                        <div class="warning-icon">⚠️</div>
                        <p>确定要删除任务 "{{ taskToDelete?.name }}" 吗？此操作不可恢复。</p>
                        <div class="form-actions">
                            <button type="button" class="btn" @click="showDeleteModal = false">取消</button>
                            <button type="button" class="btn btn-danger" @click="deleteTask">确认删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getMessageTasks, getMessageTask, createMessageTask, updateMessageTask, deleteMessageTask, getAvailableTargets } from '../../../api/messageTasks'

export default {
    name: 'MessagesManagement',
    data() {
        return {
            tasks: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            statusFilter: '',
            showModal: false,
            showDetailModal: false,
            showDeleteModal: false,
            isEdit: false,
            currentTask: null,
            taskToDelete: null,
            sendMode: 'scheduled',
            selectAllUsers: false,
            targetSearch: '',
            form: {
                name: '',
                type: 'text',
                content: '',
                originalMessageId: '',
                targetType: 'group',
                targetIds: [],
                scheduledTime: this.formatDateForInput(new Date(Date.now() + 3600000)),
                repeatType: 'none'
            },
            targets: {
                groups: [],
                users: []
            },
            targetLoading: false,
            targetOptions: []
        }
    },
    computed: {
        totalPages() {
            return Math.ceil(this.total / this.pageSize)
        },
        filteredTargets() {
            if (this.form.targetType === 'group') {
                return this.targets.groups
            } else if (this.form.targetType === 'user') {
                return this.targets.users
            }
            return []
        },
        filteredTargetsBySearch() {
            if (!this.targetSearch) return this.filteredTargets

            const search = this.targetSearch.toLowerCase()
            return this.filteredTargets.filter(target =>
                target.name.toLowerCase().includes(search) ||
                target.id.toString().includes(search)
            )
        }
    },
    created() {
        this.fetchTasks()
        this.fetchTargets()
    },
    methods: {
        async fetchTasks() {
            try {
                const params = {
                    page: this.currentPage,
                    limit: this.pageSize
                }

                if (this.statusFilter) {
                    params.status = this.statusFilter
                }

                const res = await getMessageTasks(params)
                if (res.data && res.data.success) {
                    this.tasks = res.data.data.tasks
                    this.total = res.data.data.pagination.total
                }
            } catch (error) {
                console.error('获取任务列表失败:', error)
                this.$notify({
                    title: '错误',
                    message: '获取任务列表失败，请刷新页面重试',
                    type: 'error'
                })
            }
        },
        async fetchTargets() {
            try {
                const res = await getAvailableTargets()
                if (res.data && res.data.success) {
                    this.targets.groups = res.data.data.groups
                    this.targets.users = res.data.data.users
                }
            } catch (error) {
                console.error('获取目标列表失败:', error)
                this.$notify({
                    title: '错误',
                    message: '获取目标列表失败，请刷新页面重试',
                    type: 'error'
                })
            }
        },
        handleSelectAllUsers() {
            if (this.selectAllUsers) {
                this.form.targetIds = []
            }
        },
        formatType(type) {
            const types = {
                text: '文本消息',
                forward: '转发消息'
            }
            return types[type] || type
        },
        formatTarget(targetType) {
            const types = {
                group: '群组',
                user: '用户',
                all: '所有'
            }
            return types[targetType] || targetType
        },
        formatStatus(status) {
            const statuses = {
                pending: '待执行',
                running: '执行中',
                completed: '已完成',
                failed: '失败'
            }
            return statuses[status] || status
        },
        formatRepeatType(repeatType) {
            const types = {
                none: '不重复',
                daily: '每天',
                weekly: '每周',
                monthly: '每月'
            }
            return types[repeatType] || repeatType
        },
        formatDate(dateString) {
            if (!dateString) return ''
            const date = new Date(dateString)
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            })
        },
        formatDateForInput(date) {
            return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 16)
        },
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--
                this.fetchTasks()
            }
        },
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++
                this.fetchTasks()
            }
        },
        showCreateForm() {
            this.isEdit = false
            this.sendMode = 'scheduled'
            this.selectAllUsers = false
            this.form = {
                name: '',
                type: 'text',
                content: '',
                originalMessageId: '',
                targetType: 'group',
                targetIds: [],
                scheduledTime: this.formatDateForInput(new Date(Date.now() + 3600000)),
                repeatType: 'none'
            }
            this.showModal = true
        },
        async viewTask(task) {
            try {
                const res = await getMessageTask(task._id)
                if (res.data && res.data.success) {
                    this.currentTask = res.data.data
                    this.showDetailModal = true
                }
            } catch (error) {
                console.error('获取任务详情失败:', error)
                this.$notify({
                    title: '错误',
                    message: '获取任务详情失败，请重试',
                    type: 'error'
                })
            }
        },
        editTask(task) {
            this.isEdit = true
            this.sendMode = 'scheduled'
            this.selectAllUsers = false
            this.form = {
                id: task._id,
                name: task.name,
                type: task.type,
                content: task.content,
                originalMessageId: task.originalMessageId,
                targetType: task.targetType,
                targetIds: task.targetIds,
                scheduledTime: this.formatDateForInput(new Date(task.scheduledTime)),
                repeatType: task.repeatType
            }
            this.showModal = true
        },
        confirmDelete(task) {
            this.taskToDelete = task
            this.showDeleteModal = true
        },
        async deleteTask() {
            if (!this.taskToDelete) return

            try {
                const res = await deleteMessageTask(this.taskToDelete._id)
                if (res.data && res.data.success) {
                    this.showDeleteModal = false
                    this.taskToDelete = null
                    this.fetchTasks()
                    this.$notify({
                        title: '成功',
                        message: '任务已删除',
                        type: 'success'
                    })
                } else {
                    this.$notify({
                        title: '错误',
                        message: res.data?.message || '删除任务失败',
                        type: 'error'
                    })
                }
            } catch (error) {
                console.error('删除任务失败:', error)
                if (error.response && error.response.status === 401) {
                    this.$router.push('/login')
                    this.$notify({
                        title: '错误',
                        message: '登录已过期，请重新登录',
                        type: 'error'
                    })
                } else {
                    this.$notify({
                        title: '错误',
                        message: '删除任务失败，请重试',
                        type: 'error'
                    })
                }
            }
        },
        closeModal() {
            this.showModal = false
        },
        closeDetailModal() {
            this.showDetailModal = false
            this.currentTask = null
        },
        async saveTask() {
            try {
                const formData = { ...this.form }

                if (this.sendMode === 'immediately') {
                    formData.sendNow = true
                }

                let res
                if (this.isEdit) {
                    res = await updateMessageTask(this.form.id, {
                        name: this.form.name,
                        content: this.form.content,
                        scheduledTime: this.form.scheduledTime,
                        repeatType: this.form.repeatType
                    })
                } else {
                    res = await createMessageTask(formData)
                }

                if (res.data && res.data.success) {
                    this.closeModal()
                    this.fetchTasks()
                    this.$notify({
                        title: '成功',
                        message: this.sendMode === 'immediately'
                            ? '消息已发送'
                            : (this.isEdit ? '任务已更新' : '任务已创建'),
                        type: 'success'
                    })
                }
            } catch (error) {
                console.error(this.isEdit ? '更新任务失败:' : '创建任务失败:', error)
                this.$notify({
                    title: '错误',
                    message: this.isEdit ? '更新任务失败，请重试' : '创建任务失败，请重试',
                    type: 'error'
                })
            }
        },
        handleTargetSearch: async (query) => {
            if (query) {
                this.targetLoading = true
                try {
                    const response = await getAvailableTargets({ query })
                    this.targetOptions = response.data
                } catch (error) {
                    this.$notify({
                        title: '错误',
                        message: '搜索失败',
                        type: 'error'
                    })
                } finally {
                    this.targetLoading = false
                }
            }
        },
        handleTargetChange: (value) => {
            this.form.targetIds = value
        }
    }
}
</script>

<style scoped>
.messages-container {
    padding: 20px;
    background-color: #f7f9fc;
    min-height: 100%;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.filter-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-item {
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.filter-item label {
    margin-right: 8px;
    font-weight: 500;
}

.filter-item select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.refresh-btn {
    margin-left: auto;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.task-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.task-table th,
.task-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.task-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #555;
}

.task-table tr:hover {
    background-color: #f7f9fc;
}

.action-buttons {
    display: flex;
    gap: 5px;
}

.btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    background-color: #f0f0f0;
    color: #333;
}

.btn:hover {
    background-color: #e0e0e0;
}

.btn-primary {
    background-color: #1890ff;
    color: #fff;
}

.btn-primary:hover {
    background-color: #0c80f0;
}

.btn-danger {
    background-color: #ff4d4f;
    color: #fff;
}

.btn-danger:hover {
    background-color: #f53e3e;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.btn-icon {
    padding: 5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #ddd;
}

.icon {
    font-size: 16px;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    text-align: center;
    min-width: 60px;
}

.status-badge.pending {
    background-color: #e6f7ff;
    color: #1890ff;
}

.status-badge.running {
    background-color: #fff7e6;
    color: #fa8c16;
}

.status-badge.completed {
    background-color: #f6ffed;
    color: #52c41a;
}

.status-badge.failed {
    background-color: #fff1f0;
    color: #f5222d;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.page-info {
    padding: 0 15px;
    color: #666;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 600px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.close {
    font-size: 22px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #1890ff;
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.help-text {
    color: #666;
    font-size: 0.85rem;
    margin-top: 5px;
}

.help-text.small {
    font-size: 0.8rem;
}

.help-text code {
    background-color: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

.help-text ol {
    margin-top: 5px;
    padding-left: 20px;
}

.help-text ol li {
    margin-bottom: 3px;
}

.required {
    color: #f56c6c;
}

.radio-group {
    display: flex;
    gap: 15px;
}

.radio-label,
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-label input,
.checkbox-label input {
    margin-right: 5px;
}

.targets-selection {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.search-box {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.search-box input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.targets-multi-select {
    height: 150px;
    width: 100%;
    border: none;
    padding: 0;
}

.targets-multi-select option {
    padding: 8px 12px;
}

.selected-count {
    font-size: 12px;
    color: #888;
    font-weight: normal;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    gap: 10px;
}

.task-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-card {
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 15px;
}

.detail-item {
    margin-bottom: 15px;
    display: flex;
}

.detail-item .label {
    font-weight: 600;
    min-width: 120px;
    color: #555;
}

.content-preview {
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.task-results {
    margin-top: 10px;
}

.task-results h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
}

.result-stats {
    display: flex;
    gap: 20px;
}

.stat-item {
    text-align: center;
    flex: 1;
    padding: 15px;
    border-radius: 6px;
    background-color: #f9f9f9;
}

.stat-value {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

.stat-item.success .stat-value {
    color: #52c41a;
}

.stat-item.failed .stat-value {
    color: #f5222d;
}

.empty-message {
    padding: 40px 0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
}

.empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.delete-confirmation {
    text-align: center;
    padding: 20px 0;
}

.warning-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: #faad14;
}

.select-all-option {
    margin-bottom: 10px;
}

.send-mode-group {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
</style>